<template>
    <el-table class="w100 flex-auto" ref="tableRef" :key="tableKey" v-bind="$attrs" stripe border :scrollbar-always-on="true" empty-text="暂无数据/No datas."><slot></slot></el-table>
</template>

<script setup lang="ts" name="VpTable">
import { ref, watch, nextTick, onMounted, getCurrentInstance } from 'vue';
import { useAttrs } from "vue";

    const attrs = useAttrs();
    const tableKey = ref(Math.random());
    const tableRef = ref();
    const instance = getCurrentInstance();

    // table数据改变时，通过改变key来强制table重新渲染，以避免滚动条不刷新的问题
    // watch(() => attrs.data, () => {
    //     nextTick(() => {
    //         // window.dispatchEvent(new Event('resize'));
    //         // tableRef.value.doLayout();
    //         tableKey.value = Math.random();
    //     })
    // });

    // 继承el-table的方法
    onMounted(() => {
        Object.values(tableRef.value).forEach((value) => {
            if (typeof value === "function") {
                instance.exposed[value.name] = (...args: any) => value(...args);
            }
        });
    });

    defineExpose({
    })
</script>

<style scoped lang="scss">
    :deep(.el-table__footer-wrapper tfoot td.el-table__cell) {
        background-color: #edeef0;
    }
</style>